本日小作品：
https://codepen.io/linchinhsuan/pen/yLOZaXO

乍看之下與昨日文具店沒有什麼不同，但不同的是像是產品名稱和價格之類的，都是寫死在html裡面的，今天則使用JavaScript將每項商品以物件的形式記錄下來，再透過.textContent寫上去。

練習重點摘要：

var bookStore = [
    {
        item : "蠟筆",
        price : 20,
        num : 10
    },{
        item : "筆記本",
        price : 30,
        num : 5
    }
]

宣告一個叫做bookStore的陣列，裡面放兩個物件，分別是蠟筆和筆記本兩商品的相關資訊。透過物件的形式，可以把像是這個商品的名字、價格、數量等等紀錄在一個物件裡面。

var eraser = {
    item : "橡皮擦",
    price : 15,
    num : 20
}
bookStore.push(eraser);

宣告一個叫做eraser的物件，裡面放著橡皮擦的相關商品資訊。.push()是可以新增東西到陣列中（不會覆蓋的那種新增）。所以這裡用了.push()之後整個bookStore陣列變成長度為3的陣列。

var el = document.querySelectorAll(".shop ul li p");
for(var i=0;i<3;i++){
    el[i].textContent = bookStore[i].item + bookStore[i].price + "元";
}

第一行是透過.querySelectorAll()選取節點陣列，這樣就會撈到每一個商品裡面的P段落。然後透過for迴圈，將對應的值寫入，就可以達成我們要的效果。
el[i]代表el這個陣列中的第i項，這裡要注意陣列的數字是從0開始的。
以蠟筆為例el[0].textContent = bookStore[0].item + bookStore[0].price + "元";
el的第1個（也就是陣列的[0]）是class為pen的p段落，bookStore[0]則是陣列中第一個物件也就是蠟筆，透過.item和.price撈出物件中對應的值，最後組合就成為我們所見的那樣了。

－－－

備註：
icon圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是十二天，今天行程滿滿滿，覺得能夠完賽的前輩們好厲害啊！